﻿<div class="d-flex flex-column w-100 tooltip-demo">
    <div class="d-flex justify-content-center">
        <Tooltip Placement="Placement.Bottom" Title="Tootip">
            <BootstrapInput Value="@BottomString" aria-label="@BottomString" />
        </Tooltip>
    </div>
    <div class="d-flex justify-content-between align-items-center flex-fill">
        <Tooltip Placement="Placement.Right" Title="Tootip">
            <BootstrapInput Value="@RightString" aria-label="@RightString" />
        </Tooltip>
        <Tooltip Placement="Placement.Left" Title="Tootip">
            <BootstrapInput Value="@LeftString" aria-label="@LeftString" />
        </Tooltip>
    </div>
    <div class="d-flex justify-content-center">
        <Tooltip Placement="Placement.Top" Title="Tootip">
            <BootstrapInput Value="@TopString" aria-label="@TopString" />
        </Tooltip>
    </div>
</div>

@code {
    private static string TopString => "Tooltip on top";

    private static string LeftString => "Tooltip on left";

    private static string RightString => "Tooltip on right";

    private static string BottomString => "Tooltip on bottom";
}
